<template>
  <div class="editPerson">
    <Header>
      <span class="iconfont iconjiantou2" slot="left" @click="$router.back()"></span>
      <span slot="title">编辑用户信息</span>
    </Header>
    <div class="userImg">
      <img :src="currentUser.head_img" alt />
      <van-uploader :after-read="afterRead" />
    </div>
    <cell title="昵称" :desc="currentUser.nickname" @click="nickshow=!nickshow"></cell>
    <van-dialog v-model="nickshow" title="修改昵称" show-cancel-button @confirm="updateNickname">
      <van-field ref="nick" :value="currentUser.nickname" placeholder="请输入昵称" label="昵称" required />
    </van-dialog>
    <cell title="密码" :desc="currentUser.password" type="password" @click="pswshow=!pswshow"></cell>
    <van-dialog
      v-model="pswshow"
      title="修改密码"
      show-cancel-button
      :before-close="beforecls"
      @confirm="updatePassword"
    >
      <van-field ref="oldpsw" type="password" placeholder="请输入原密码" label="原密码" required />
      <van-field ref="newpsw" type="password" placeholder="请输入新密码" label="新密码" required />
      <van-field ref="renewpsw" type="password" placeholder="请再次确认新密码" label="再次新密码" required />
    </van-dialog>
    <cell title="性别" :desc="currentUser.gender==1? '男' : '女'" @click="gendershow=!gendershow"></cell>
    <van-dialog v-model="gendershow" title="修改性别" show-cancel-button @confirm="updateGender">
      <van-picker :columns="['女','男']" @change="onChange" :default-index="currentUser.gender"/>
    </van-dialog>
  </div>
</template>

<script>
import Header from '../components/header.vue';
import cell from '../components/cell.vue';
import { personData } from '../apis/users.js';
import { uploadImg } from '../apis/upload.js';
import { updatePerson } from '../apis/users.js';
export default {
  components: {
    Header,
    cell
  },
  data() {
    return {
      currentUser: {},
      nickshow: false,
      pswshow: false,
      gendershow: false,
      gender: '',
    };
  },
  async mounted() {
    //进来就根据id把数据渲染出来
    let id = this.$route.params.id;
    let res = await personData(id);
    //   console.log(res);
    if (res.data.message == '获取成功') {
      this.currentUser = res.data.data;
      this.currentUser.head_img =
        'http://127.0.0.1:3000' + this.currentUser.head_img;
    }
  },
  methods: {
    //编辑头像
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      //   console.log(file.file);//获取到图片文件 准备上传到服务器
      let fd = new FormData();
      fd.append('file', file.file);
      let res = await uploadImg(fd);
      //   console.log(res);
      if (res.data.message == '文件上传成功') {
        //上传成功就发送请求更新数据
        this.currentUser.head_img = 'http://127.0.0.1:3000' + res.data.data.url;
      }
    },
    //编辑昵称
    async updateNickname() {
      let name = this.$refs.nick.$refs.input.value;
      //   console.log(this.$refs.nick.$refs.input.value); //获取数据后发送更新用户信息
      let res = await updatePerson(this.$route.params.id, { nickname: name });
      // console.log(res);
      if (res.data.message == '修改成功')
        this.currentUser.nickname = res.data.data.nickname;
    },
    //编辑密码
    async updatePassword() {
      let oldpsw = this.$refs.oldpsw.$refs.input.value;
      let newpsw = this.$refs.newpsw.$refs.input.value;
      let renewpsw = this.$refs.renewpsw.$refs.input.value;
      let rex = /^\S{3,16}$/;
      // console.log(oldpsw,newpsw,this.currentUser.password);
      if (
        oldpsw == this.currentUser.password &&
        rex.test(newpsw) &&
        newpsw == renewpsw
      ) {
        let res = await updatePerson(this.$route.params.id, {
          password: renewpsw
        });
        console.log(res);
      }
    },
    // 修改密码是否关闭dialog
    beforecls(action, done) {
      //   console.log(action);
      if (action === 'confirm') {
        let oldpsw = this.$refs.oldpsw.$refs.input.value;
        let newpsw = this.$refs.newpsw.$refs.input.value;
        let renewpsw = this.$refs.renewpsw.$refs.input.value;
        let rex = /^\S{3,16}$/;
        if (oldpsw !== this.currentUser.password) {
          this.$toast.fail('密码错误');
          done(false);
        } else if (!rex.test(newpsw)) {
          this.$toast.fail('请输入3-16密码');
          done(false);
        } else if (newpsw !== renewpsw) {
          this.$toast.fail('两次密码不一致');
          done(false);
        }
        // 如果这里没有添加done,那么窗口不会关闭且在转啊转
        else {
          //这个else是点击confirm 如果没有以上的条件 就是属于成功修改 关闭dialog
          done();
        }
      } else {
        //这个else是点击cancel后关闭
        done();
      }
    },
    //监听picker选项的变化，获取值 存下
    onChange(picker, value, index) {
      this.$toast(`当前值：${value}, 当前索引：${index}`);
      // console.log(index);获取当前的索引 存一下
      this.gender = index;
      // console.log(this.gender);
      
    },
    //编辑性别
    async updateGender() {
      let res = await updatePerson(this.currentUser.id, {gender: this.gender});
      // console.log(res);
      if(res.data.message === '修改成功') this.currentUser.gender = this.gender;
      else this.$toast.fail('修改失败')
    }
  }
};
</script>

<style lang="less" scoped>
.userImg {
  position: relative;
  height: 100px;
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // margin-top: 50px;
    width: 90/360 * 100vw;
    height: 90/360 * 100vw;
    border-radius: 50%;
  }
  /deep/.van-uploader__upload {
    width: 90/360 * 100vw;
    height: 90/360 * 100vw;
  }
  /deep/.van-uploader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
</style>